<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外卖</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../global/css/supplyShoping.css">
</head>
<body>
<div class="container">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入商品名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分享描述</label>
            <div class="layui-input-inline">
                <input type="text" name="password" required lay-verify="required" placeholder="请输入分享描述"
                       autocomplete="off" class="layui-input">
                <div class="layui-form-mid layui-word-aux">微信分享给好友时会显示，建议36个字以内</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品图：</label>
            <div class="layui-input-inline file">
                <div class="file">
                    <input onchange="changepic(this)" style="display:block;width: 83px;height: 83px;position:absolute;opacity:0;" type="file" id="img"
                           name="goodsPicture" accept="image/gif,image/jpeg,image/x-png"/>
                    <img style="width: 83px;height: 83px;"
                         src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1557026059&di=6b1de82630da923757fa6aa52c34fe52&src=http://ku.90sjimg.com/element_origin_min_pic/00/91/87/8856f1865e892ed.jpg">
                </div>
                <div class="layui-form-mid layui-word-aux">建议尺寸：800*800像素，最多上传6张</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品视频：</label>
            <div class="layui-input-inline file">
                <div class="file">
                    <input onchange="changepic(this)" style="display:block;width: 83px;height: 83px;position:absolute;opacity:0;" type="file" id="img"
                           name="goodsPicture" accept="image/gif,image/jpeg,image/x-png"/>
                    <img style="width: 83px;height: 83px;"
                         src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1557026059&di=6b1de82630da923757fa6aa52c34fe52&src=http://ku.90sjimg.com/element_origin_min_pic/00/91/87/8856f1865e892ed.jpg">
                </div>
                <div class="layui-form-mid layui-word-aux">建议时长9~30秒，建议视频宽高比1:1</div>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品类目:</label>
            <div class="layui-input-inline" >
                <select name="type" lay-verify="required" id ="GoodsType">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品规格:</label>
            <div class="layui-input-block specBox">
                <div class="specItem">
                    <div class="layui-form-item bg-F8">
                        <label class="layui-form-label">规格名：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入规格名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">规格值：</label>
                        <div class="layui-input-block addSpecifications">
                            <input type="text" name="title" required lay-verify="required" placeholder="请输入规格值"
                                   autocomplete="off" class="layui-input layui-input1">
                            <div class="layui-btn layui-btn-sm form_btn">添加规格值</div>
                        </div>
                    </div>
                </div>

                <div class="layui-btn layui-btn-sm form_btn1">添加规格值</div>

            </div>
        </div>
        <!--规格说明-->
        <div class="layui-form-item">
            <label class="layui-form-label">规格说明:</label>
            <div class="layui-input-inline">

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
</html>
<script type="text/javascript" src="../../global/js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../global/js/jq.js"></script>
<script type="text/javascript" src="../../global/js/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="../../global/js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../global/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="../../global/layui/layui.js"></script>
<script type="text/javascript" src="../../global/js/my/permission.js"></script>
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;

        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , url: '/upload/' //上传接口
            , done: function (res) {
                //上传完毕回调
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
    //获取所属栏目：
    $.ajax({
        url: "/clyjNearbyShopsGoods/queryGoodsType",
        dataType: 'json',
        type: 'post',
        async: false,
        success: function (data) {
            console.log(data);
            $.each(data, function (index, data) {
                $("#GoodsType").append('<option value="0">'+data+'</option>')
            });

        }
    })
    //点击添加规格按钮
    $(".specBox").on("click", ".form_btn", function () {
        //添加的规格暂时没有最大限度
        $(this).parent(".addSpecifications").prepend('<input type="text" name="title" required  lay-verify="required" placeholder="请输入规格值" autocomplete="off" class="layui-input layui-input1">')

    })
    //添加规格值
    $(".form_btn1").click(function () {
        if ($(this).siblings(".specItem").length < 3) {
            console.log($(this).siblings(".specItem").length);
            $(".specBox").prepend('<div class="specItem"><div class="layui-form-item bg-F8">' +
                '                            <label class="layui-form-label">规格名：</label>' +
                '                            <div class="layui-input-inline">' +
                '                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入规格名" autocomplete="off" class="layui-input">' +
                '                            </div>' +
                '                        </div>' +
                '                        <div class="layui-form-item">' +
                '                            <label class="layui-form-label">规格值：</label>' +
                '                            <div class="layui-input-block addSpecifications">' +
                '                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入规格值" autocomplete="off" class="layui-input layui-input1">' +
                '                                <div class="layui-btn layui-btn-sm form_btn">添加规格值</div>' +
                '                            </div>' +
                '                        </div></div>')
        } else {
            alert("已达到最大添加数")
        }
    })
</script>